從 W3Schools 學習基本頁面佈局 - 前處理

我剛開始學 HTML, CSS 是在 W3Schools 這個網站上學的，內容非常詳盡，絕對推薦給每一個想要入門網頁開發的人。即使是現在，我也常常回去查我忘記的語法，很實用！

所以第一篇正文，我們就來研究 W3Schools 的程式碼，看看他們是如何佈局出整個網頁的吧！

W3Schools網址：https://www.w3schools.com/

讓我們先簡化程式碼

正式上線的網頁，通常都會經過許多處理：Transpile(轉譯)、Minify(壓縮減少換行和空白)、Uglify(修改變數命名讓別人較難看出JS邏輯）、打包、塞入追蹤程式碼等，這些會讓我們難以找到真正影響樣式的code，所以我預先把w3schools的程式碼抓下來，刪除了許多不必要的部份，後續我們會基於簡化後的code來討論（關於如何簡化程式碼，後續會有獨立文章說明）：

CodeSandbox
Live Demo

所有程式碼版權由 W3Schools.com 所有，本文章僅供教學用途。

簡化後的畫面（桌機版本），只留下必要元素：

簡化後的畫面（手機版本），左側sidebar被隱藏了，保留了原站的RWD功能：

明天，讓我們來深入他們的程式碼實作細節，看他們如何佈局網站的排版，以及實現RWD功能！